<template>
	<div>
		<div class="staff_ditails" v-if="subPage == 0">
			<div class="container" style="position: fixed; top: 0;left: 0;">
				<span class="title">{{ staffTitle }}</span>
			</div>

			<div class="tab_control">
				<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
					<el-tab-pane label="详细信息" name="1">
						<div class="flex_container">
							<div class="left-info-box">
								<div class="flex_row flex_row_top">
									<span class="left left_width">物料名称：</span>
									<span class="right">{{materialPlanInfo.name}}</span>
								</div>
								<div class="flex_row flex_row_top">
									<span class="left left_width">物料ID：</span>
									<span class="right">{{materialPlanInfo.materialId}}</span>
								</div>
								<div class="flex_row flex_row_top">
									<span class="left left_width">属性：</span>
									<span class="right">{{materialPlanInfo.property}}</span>
								</div>
								<div class="flex_row flex_row_top">
									<span class="left left_width">用料周期：</span>
									<span class="right">{{planPeriod}}</span>
								</div>
								<div class="flex_row flex_row_top">
									<span class="left left_width">用料总量：</span>
									<span class="right">{{materialPlanInfo.total}}</span>
								</div>
								<div class="flex_row flex_row_top">
									<span class="left left_width">计数单位：</span>
									<span class="right">{{materialPlanInfo.unit}}</span>
								</div>
								<div class="flex_row flex_row_top">
									<span class="left left_width">设备类型：</span>
									<span class="right">{{materialPlanInfo.deviceType}}</span>
								</div>
								<div class="flex_row flex_row_top">
									<span class="left left_width">设备名称：</span>
									<span class="right">{{materialPlanInfo.deviceName}}</span>
								</div>
								<div class="warn-box">
									<div>
										<div class="alarm-box" style="margin-top: 16px;">
											<span class="alarm-text">是否报警</span>
											<el-switch 
												v-model="materialPlanInfo.alarm" 
												active-color="#13ce66" 
												:width="34.5" 
												:disabled="disabled">
											</el-switch>
											<el-tooltip class="item" effect="dark" content="开启后会把告警信息推送给所选推送人！" placement="top">
												<i class="iconfont iconwenhao"></i>
											</el-tooltip>
										</div>
										<div class="alarm-box">
											<span class="alarm-text">已达预计总量提醒</span>
											<el-switch 
												v-model="materialPlanInfo.reachedRemind" 
												active-color="#13ce66" 
												:disabled="reachAlarm" 
												:width="34.5">
											</el-switch>
											<el-tooltip class="item" effect="dark" content="已达预计总量提醒以用料数量发出提醒！" placement="top">
												<i class="iconfont iconwenhao"></i>
											</el-tooltip>
										</div>
										<div class="alarm-box">
											<span class="alarm-text">超出预计总量提醒</span>
											<el-switch 
												v-model="materialPlanInfo.beyondRemind" 
												active-color="#13ce66" 
												:disabled="exceedAlarm" 
												:width="34.5">
											</el-switch>
											<el-tooltip class="item" effect="dark" content="超出预计总量提醒以用料数量，如果发出即向指定推送人发出提醒！" placement="top">
												<i class="iconfont iconwenhao"></i>
											</el-tooltip>
										</div>
									</div>
									<div class="remind-user">
										<span class="left left_width">推送人：</span>
										<span class="right">{{materialPlanInfo.userName}}</span>
									</div>
								</div>
							</div>

							<div class="right-info-box">
								<table class="car-table">
									<tr class="tr-row tr-color">
										<th class="th-bg th-width">车辆号</th>
										<th class="th-bg th-row">所属单位</th>
										<th class="th-bg th-width">负责人</th>
									</tr>
									<tr class="tr-row" v-for="(item, index) in vehicleList" :key="index">
										<td class="th-bg th-width">{{ item.numberPlate }}</td>
										<td class="th-bg th-row">{{ item.vehicleInfo }}</td>
										<td class="th-bg th-width">{{ item.name }}</td>
									</tr>
								</table>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="称重记录" name="2">
						<div class="flex_container">
							<el-table
								:data="weighRecordList"
								ref="multipleTable"
								tooltip-effect="dark"
								:height="tableHeight"
								v-if="tableHeight"
								style="width: 100%;">
								<el-table-column prop="materialName" label="物料名称"></el-table-column>
								<el-table-column prop="materialId" label="物料ID"></el-table-column>
								<el-table-column label="指定运送车辆" width="320">
									<template slot-scope="scope">
										<div>{{ scope.row.numberPlate }}&nbsp;{{ scope.row.vehicleInfo }}&nbsp;{{ scope.row.vehicleName }}</div>
									</template>
								</el-table-column>
								<el-table-column prop="total" label="预计用料总量"></el-table-column>
								<el-table-column prop="deviceName" label="地磅名称"></el-table-column>
								<el-table-column prop="weighingDate" label="称重时间"></el-table-column>
								<el-table-column prop="weight" label="重量"></el-table-column>
								<el-table-column prop="group" label="抓拍照片">
									<template slot-scope="scope">
										<!-- <el-image 
											class="user_image"
											:src="scope.row.photoUrl" 
											fit="cover"
											:preview-src-list="scope.row.photoUrl.split(',')">
											<div slot="error" class="image-slot">
												<i class="el-icon-picture-outline"></i>
											</div>
										</el-image> -->
									</template>
								</el-table-column>
								<el-table-column label="操作">
									<template slot-scope="scope">
										<el-button type="text" size="small" @click="checkWeighMonitor(scope.row.id)">查看监控录像</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<Pagination :pageData="pageData1" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
					</el-tab-pane>
					<el-tab-pane label="报警记录" name="3">
						<div class="flex_container">
							<el-table
								:data="warnRecordList"
								ref="multipleTable"
								tooltip-effect="dark"
								:height="tableHeight"
								v-if="tableHeight"
								style="width: 100%;">
								<el-table-column prop="materialName" label="物料名称"></el-table-column>
								<el-table-column prop="materialId" label="物料ID"></el-table-column>
								<el-table-column label="车辆信息" width="320">
									<template slot-scope="scope">
										<div>{{ scope.row.numberPlate }}&nbsp;{{ scope.row.vehicleInfo }}&nbsp;{{ scope.row.vehicleName }}</div>
									</template>
								</el-table-column>
								<el-table-column prop="total" label="预计用料总量"></el-table-column>
								<el-table-column prop="currentlyHas" label="实际用料总量"></el-table-column>
								<el-table-column prop="alarmDate" label="报警时间" width="160"></el-table-column>
								<el-table-column prop="beyondWeight" label="超出数量"></el-table-column>
								<el-table-column prop="userName" label="推送人"></el-table-column>
								<el-table-column prop="group" label="抓拍">
									<template slot-scope="scope">
										<!-- <el-image 
											class="user_image"
											:src="scope.row.photoUrl" 
											fit="cover"
											:preview-src-list="scope.row.photoUrl.split(',')">
											<div slot="error" class="image-slot">
												<i class="el-icon-picture-outline"></i>
											</div>
										</el-image> -->
									</template>
								</el-table-column>
								<el-table-column label="操作">
									<template slot-scope="scope">
										<el-button type="text" size="small" @click="checkWarnMonitor(scope.row.id)">查看监控录像</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<Pagination :pageData="pageData2" @pageNum="getPageNumData" @pageSize="getPageSizeData"></Pagination>
					</el-tab-pane>
				</el-tabs>
			</div>

			<el-row class="but_box">
				<el-button type="text" size="small" icon="iconfont iconfanhui" plain @click="returnPreviousPage">返回</el-button>
			</el-row>
		</div>

		<div v-else>
			<MonitorPlayback :menuType="menuType"></MonitorPlayback>
		</div>
	</div>
</template>

<script>
	import HttpInterface from "../../util/httpInterface";
	import Pagination from "../components/Pagination"
	import MonitorPlayback from "../components/MonitorPlayback"
	import Constants from "../../util/constants"

	export default {
  name: "PlanDetailsModel",
  components: {
		Pagination,
		MonitorPlayback
	},
  data() {
    return {
			subPage: 0,
			activeName: "1",
			menuType: 0,
      staffTitle: "用料计划详细信息",
			tableHeight: 0,
			weighRecordList: [],
			warnRecordList: [],
			materialPlanInfo:{
				name: "",
				materialId: "",
				property: "",
				total: "",
				unit: "",
				deviceType: "",
				deviceId: "",
				alarm: true,
				reachedRemind: false,
				beyondRemind: false
			},
			planPeriod: '',
			remindUser: [],
			vehicleList: [],
			reachAlarm: true,
			exceedAlarm: true,
			disabled: true,
			pageData1: {
        total: 0,
        pageNum: 1,
        pageSize: 20
			},
			pageData2: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      }
		};
	},

	created() {
		this.getTableHeight();
  },

  mounted() {
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },

  beforeRouteLeave(to, from, next) {
    window.onresize = null;
    next();
  },
	
  methods: {
		getTableHeight() {
      let tableH = 230;
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },

		// 标签选项卡
		handleClick() {
			var num = this.activeName;
			if (num == 1) {
				this.menuType = 1;
			} else if (num == 2) {
				this.menuType = 2;
				this.getWeighRecordList();
			} else if (num == 3) {
				this.menuType = 3;
				this.getWarnRecordList();
			}
		},

		// 重置页面
		resetPage() {
			this.subPage = 0;
		},

		// 返回按钮
		returnPreviousPage () {
			this.$parent.resetPresentPage();
		},

		// 查看称重监控
		checkWeighMonitor(id) {
			console.log(id);
			this.subPage = 1;
		},

		// 查看报警监控
		checkWarnMonitor(id) {
			console.log(id);
			this.subPage = 1;
		},

		// 获取称重记录
		getWeighRecordList () {
			var _this = this;
			var params = {
				pageSize: this.pageData1.pageSize,
				pageNum: this.pageData1.pageNum
			}
			HttpInterface.requestPost(this, HttpInterface.URL_WEIGHING_LIST, params, function (response) {
				var data = response.data;
				if (data.code == "0000") {
					_this.weighRecordList = data.data;
					_this.pageData1 = {
						total: data.total,
						pageNum: data.pageNum,
						pageSize: data.pageSize
					}
				}
			}, null, true)
		},

		// 获取报警记录
		getWarnRecordList () {
			var _this = this;
			var params = {
				pageSize: this.pageData1.pageSize,
				pageNum: this.pageData1.pageNum
			}
			HttpInterface.requestPost(this, HttpInterface.URL_ALARM_LIST, params, function (response) {
				var data = response.data;
				if (data.code == "0000") {
					_this.warnRecordList = data.data;
					_this.pageData2 = {
						total: data.total,
						pageNum: data.pageNum,
						pageSize: data.pageSize
					}
				}
			}, null, true)
		},

		pageNumData (page) {
      this.pageData.pageNum = Number(page);
      this.getWeighRecordList();
    },

    pageSizeData (page) {
      this.pageData.pageSize = Number(page);
      this.getWeighRecordList();
		},
		
		getPageNumData (page) {
      this.pageData.pageNum = Number(page);
      this.getWarnRecordList();
    },

    getPageSizeData (page) {
      this.pageData.pageSize = Number(page);
      this.getWarnRecordList();
    },
		
	  getPlanInfo (userId) {
			this.getUserList();
		  var _this = this;
		  var params = {
			  "id": userId
		  };
		  HttpInterface.requestPost(this, HttpInterface.URL_MATERIAL_GET, params, function (response) {
				var data = response.data;
			  if (data.success) {
					var remindUser = _this.remindUser;
					var content = data.other.material;
					remindUser.forEach(item => {
						if (content.userId = item.id) {
							content.userName = item.name;
						}
					});
					content.alarm = content.alarm == 1 ? true : false;
					content.reachedRemind = content.reachedRemind == 1 ? true : false;
					content.beyondRemind = content.beyondRemind == 1 ? true : false;
					content.deviceType = Constants.DEVICE_TYPE[Number(content.deviceType)];
					content.unit = Constants.PLAN_UNIT[content.unit];
					content.deviceName = Constants.DEVICE_NAME[content.deviceId];
					_this.planPeriod = content.startDate.replace(/\-/g, ".") + " - " + content.endDate.replace(/\-/g, ".");
					_this.materialPlanInfo = content;
					_this.vehicleList = data.other.vehicleList;
			  }
		  }, function (e) {
				
		  }, false);
		},
		
		getUserList() {
			var _this = this;
			HttpInterface.requestGet(this, HttpInterface.URL_DUTYUSER_GET_ALL, {}, function (response) {
				var data = response.data;
				data.forEach((item, index) => {
					_this.remindUser.push({
						id: item.userid,
						name: item.fullname
					})
				});
			}, null)
		},
	}
};
</script>

<style  scoped>
.staff_ditails{
	padding: 20px 20px 0 20px;
	box-sizing: border-box;
	margin-top: 70px;
}

/* 图片 */
.user_image{
  width: 30px;
  height: 30px;
  background: rgb(245, 245, 245);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  box-shadow: 0 2px 4px #cfcfcf;
}

.left-info-box{
	width: 60%;
	display: flex;
	flex-wrap: wrap;
}

.flex_row{
	width: 38%;
	font-size: 14px;
	line-height: 30px;
	display: flex;
	align-items: center;
}

.flex_row_top {
	margin-top: 20px;
	margin-right: 60px;
}

.left{
	width: 70px;
	display: inline-block;
	text-align: right;
}

/* 选项卡内容 */
.flex_container{
	margin-top: 60px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding-left: 20px;
	box-sizing: border-box;
}

.left_width {
	width: 140px;
	color: #5c6570;
}

.el-tabs--card >>> .el-tabs__header {
	padding: 0;
}

.right {
	display: inline-block;
	width: 300px;
	height: 34px;
	line-height: 34px;
	background: #f8f8f8;
	padding: 3px 0 3px 14px;
	margin-left: 5px;
}

.but_box {
  position: fixed;
  top: 14px;
  right: 20px;
  z-index: 1000;
}

.el-button >>> .iconfanhui{
	vertical-align: -1px;
	margin-right: 3px;
}

.warn-box{
	width: 100%;
	display: flex;
	font-size: 14px;
	color: #5c6570;
}

.alarm-box{
	height: 40px;
	display: flex;
	align-items: center;
}

.alarm-text{
	display: inline-block;
	width: 160px;
	margin-left: 40px;
}

.iconwenhao{
	font-size: 18px;
	margin-left: 16px;
	color: #808080;
}

.remind-user{
	width: 38%;
	display: flex;
	align-items: center;
	height: 80px;
	margin-left: 161px;
}

/* 车辆信息 */
.car-table{
	font-size: 14px;
	color: #333;
	text-align: center;
	margin-top: 20px;
}

.tr-row{
	height: 40px;
}

.th-row{
	width: 240px;
}

.th-width{
	width: 100px;
}

.th-bg{
	background: #f8f8f8;
	border: 1px solid #fff;
	box-sizing: border-box;
}

.tr-color{
	color: #8f8f8f;
}
</style>